<template>
  <div align="center">
    <h2 style="font-size: 25px; color: orangered"> 医 院 首 页</h2>
    <!--    分割线-->
    <div class="menu-container"
         style="background: #72cef8; display: flex; justify-content: center; align-items: center;"
    >
      <!-- 这里是菜单内容 -->
      <span style="display: flex; justify-content: center; align-items: center;">
    <el-button type="primary" @click="mmmmm" style="background: #72cef8">首页</el-button>
    <el-button type="primary" @click="mmmmm" style="background: #72cef8">病友圈</el-button>
    <el-button type="primary" @click="mmmmm" style="background: #72cef8">视频</el-button>
  </span>
    </div>
    <el-divider></el-divider>
    <div>
      <el-carousel :interval="4000" arrow="always">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
          <img :src="item.imageUrl" alt="carousel-image" style="width: 100%; height: 300px;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--    分割线-->
    <el-divider></el-divider>
    <p style="color: #1c84c6 ; float: left;"> || 知识宝典</p>
    <div class="container">
      <span class="left" style="color: red ;font-size: 20px ; margin-left: 70px;"> 常见病症</span>
      <span class="right" style="color: red ;font-size: 20px ; margin-right: 70px;"> 常用药品 </span>
    </div>
    <div class="button-container">
      <button class="button1"><img
        src="https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/11/15/55/994ea758-8c00-426b-8a63-03f967b2c9a7.jpg"
        alt="常见病症" @click="handleClick"
      ></button>
      <button class="button2"><img
        src="https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/11/15/55/994ea758-8c00-426b-8a63-03f967b2c9a7.jpg"
        alt="常用药品" @click="handleClickTwo"
      ></button>
    </div>
    <!--    分割线-->
    <el-divider></el-divider>
    <p style="color: #1c84c6 ; margin-right: 350px;"> || 问诊咨询</p>
    <div class="permissions-container" style="margin: 20px">
    <span class="permissions" :class="permission.class" :key="permission.id" v-for="(permission, index) in permissions">
      <div class="permission-item">
        <div class="permission-pic" style="margin: 5px">
          <button class="permission-button" @click="handleButtonClick(permission)">
            <img :src="permission.cataloguePic" alt="" class="permission-img">
          </button>
        </div>
        <div class="permission-name" style="margin: 1px">{{ permission.catalogueName }}</div>
      </div>
    </span>
    </div>
    <el-divider></el-divider>
    <p style="color: #1c84c6 ; margin-right: 350px;"> || 健康测评</p>
    <img
      src="https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/12/11/35/05281a83-c6af-461e-98cd-a13df57a103e.png"
      style="width: 450px;height: 210px"
    >
    <el-divider></el-divider>
    <div>
      <p style="color: #1c84c6  ; margin-right: 350px;"> || 健康资讯</p>
      <el-divider></el-divider>
      <div>
        <p style="color: #1c84c6">健康要闻 | 医学动态 | 医疗动态 | 养生美容 | 健身减肥</p>
        <el-divider></el-divider>
      </div>
      <div class="image-text-container">
        <img
          src="https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/12/11/32/fa0d3aa2-6885-4c76-b421-6827242558fe.jpg"
          class="image"
        >
        <!--        <span class="text"></span>-->
        <a href="/mine/index" class="text">
          女性朋友注意了，从今天起，你必须每天喝1000ml的水，且必须在早晨喝，晚上不能喝。</a>
      </div>
    </div>

    <el-divider></el-divider>
    <p style="color: #1c84c6 ; margin-right: 220px;">早上起来第一杯水要喝什么?</p>

    <el-upload
      ref="upload"
      :limit="1"
      :action="uploadAction"
      :headers="upload.headers"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading"
                 @click="submitUpload"
      >上传到服务器
      </el-button>
    </el-upload>

    <el-dialog
      title="请选择要上传的位置"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
          <el-radio v-model="radio" label="1">本地</el-radio>
          <el-radio v-model="radio" label="2">MinIO</el-radio>
          <el-radio v-model="radio" label="3">FastDFS</el-radio>
          <el-radio v-model="radio" label="4">OSS</el-radio>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitUpl">确 定</el-button>
  </span>
    </el-dialog>

    <div>
      <p style="color: #1c84c6 ; margin-right: 220px;">早上起来第一杯水要喝什么?</p>
    </div>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { queryCatalogueName } from '@/api/mine/mine'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      uploadAction: '',

      // 上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/file/upload'
      },
      dialogVisible: false,
      radio: 0,
      permissions: [],
      //轮播图
      carouselItems: [
        {
          id: 1,
          //imageUrl: 'https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/11/16/9/519d15b5-ff53-4d23-ac65-dd583d18acca.png'
          imageUrl: 'https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/12/11/31/de894078-8397-4a50-9d5c-c8896775b69b.jpg'
        },
        {
          id: 2,
          imageUrl: 'https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/11/15/55/994ea758-8c00-426b-8a63-03f967b2c9a7.jpg'
        },
        {
          id: 3,
          //imageUrl: 'https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/11/16/18/784599e2-e45d-45d5-b719-b237c6a9eac6.jpg'
          imageUrl: 'https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/12/11/32/fa0d3aa2-6885-4c76-b421-6827242558fe.jpg'
        },
        {
          id: 4,
          //imageUrl: 'https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/11/16/19/5a6bdd96-a53e-4bd2-861f-c387fb4df91a.jpg'
          imageUrl: 'https://godguang.oss-cn-shanghai.aliyuncs.com/2024/JANUARY/11/15/55/994ea758-8c00-426b-8a63-03f967b2c9a7.jpg'
        }
      ]
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    mmmmm() {

    },
    // 文件提交处理
    submitUpload() {
      this.dialogVisible = true

    },
// 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
// 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false
      this.upload.formData = {}
      console.log(response.data.url)
      this.$message.success('上传成功')
    },
    submitUpl() {
      this.uploadAction = this.upload.url + `?type=${this.radio}`
      console.log(this.uploadAction)
      this.$nextTick(() => {
        this.$refs.upload.submit()
      })
      this.dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleButtonClick(permission) {
      console.log(permission)
    },
    queryCatalogueName() {
      queryCatalogueName().then(res => {
        this.permissions = res.data
        //console.log(this.permissions)
      })
    },
    handleClickTwo() {
      //this.$router.push({ path: '/mine/diseaseInfo', query: { drugName: drugName } })
      this.$router.push({ path: '/mine/index', query: { activeIndex: '2' } })
    },
    handleClick() {
      this.$router.push({ path: '/mine/index', query: { activeIndex: '1' } })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.queryCatalogueName()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style>
.menu-container {
  position: fixed;
  top: 750px;
  width: 100%;
  height: 52px;
  /* 其他样式设置 */
}

.image-text-container {
  display: flex;
  align-items: center;
}

.image {
  width: 150px;
  height: 100px;
  margin-right: 20px;
}

.text {
  font-size: 14px;
}

.permissions-container {
  display: flex;
  flex-wrap: wrap;
}

.permission-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.permission-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.permission-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}

.permission-name {
  margin-top: 5px;
  text-align: center;
}

.permissions-container {
  display: flex;
  flex-wrap: wrap;
}

.permission-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.permission-pic {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}

.permission-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.permission-name {
  margin-top: 5px;
  text-align: center;
}

.permissions-container {
  display: flex;
  flex-wrap: wrap;
}

.permission-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.permission-name {
  margin-top: 5px;
  text-align: center;
}

.container {
  width: 100%;
  overflow: hidden; /* 清除浮动 */
}

.left {
  float: left;
}

.right {
  float: right;
}

.button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button1,
.button2 {
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button1 img,
.button2 img {
  width: 100%;
  height: auto;
  filter: grayscale(10%);
  transition: all 0.3s ease-in-out;
}

.button1:hover,
.button2:hover {
  transform: scale(1.1);
}

.button1:hover img,
.button2:hover img {
  filter: grayscale(0%);
}
</style>
